<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>华为官网 - 首页轮播</title>
  <!-- 引入基础依赖 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- Tailwind自定义配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            huawei: { blue: '#165DFF', dark: '#0F172A', light: '#F1F5F9', gray: '#64748B' }
          },
          fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] }
        }
      }
    }
  </script>
  
  <!-- 自定义工具类与动画 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto { content-visibility: auto; }
      .text-shadow { text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    }
  </style>
  <style>
    .slide-in { animation: slideIn 0.5s ease forwards; }
    @keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    .carousel-item { display: none; animation: fadeIn 1s ease; }
    .carousel-item.active { display: block; }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  </style>
</head>

<body class="font-sans bg-white text-huawei-dark">
  <!-- 导航栏 -->
  <header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/90 backdrop-blur-sm shadow-sm">
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-between h-16 md:h-20">
        <!-- 品牌Logo -->
        <a href="#" class="flex items-center space-x-2">
          <div class="w-10 h-10 bg-huawei-blue rounded flex items-center justify-center">
            <span class="text-white font-bold text-xl">H</span>
          </div>
          <span class="text-xl font-bold text-huawei-blue hidden sm:block">华为</span>
        </a>
        
        <!-- 桌面端导航 -->
        <nav class="hidden md:flex items-center space-x-8">
          <a href="#" class="text-huawei-dark hover:text-huawei-blue transition-colors">产品</a>
          <a href="#" class="text-huawei-dark hover:text-huawei-blue transition-colors">服务</a>
          <a href="#" class="text-huawei-dark hover:text-huawei-blue transition-colors">关于我们</a>
          <a href="#" class="text-huawei-dark hover:text-huawei-blue transition-colors">支持</a>
        </nav>
        
        <!-- 功能按钮 -->
        <div class="flex items-center space-x-4">
          <button class="text-huawei-dark hover:text-huawei-blue transition-colors"><i class="fa fa-search text-lg"></i></button>
          <button class="text-huawei-dark hover:text-huawei-blue transition-colors"><i class="fa fa-shopping-cart text-lg"></i></button>
          <button id="menuBtn" class="md:hidden text-huawei-dark hover:text-huawei-blue transition-colors"><i class="fa fa-bars text-xl"></i></button>
        </div>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div id="mobileMenu" class="hidden md:hidden bg-white border-t">
      <div class="container mx-auto px-4 py-3 space-y-3">
        <a href="#" class="block py-2 text-huawei-dark hover:text-huawei-blue transition-colors">产品</a>
        <a href="#" class="block py-2 text-huawei-dark hover:text-huawei-blue transition-colors">服务</a>
        <a href="#" class="block py-2 text-huawei-dark hover:text-huawei-blue transition-colors">关于我们</a>
        <a href="#" class="block py-2 text-huawei-dark hover:text-huawei-blue transition-colors">支持</a>
      </div>
    </div>
  </header>

  <!-- 英雄区轮播 -->
  <main class="pt-16 md:pt-20">
    <section>
      <div id="carousel" class="relative h-[60vh] min-h-[400px] overflow-hidden">
        <!-- 轮播项1 -->
        <div class="carousel-item active relative h-full">
          <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent z-10"></div>
          <img src="https://picsum.photos/id/1/1920/1080" alt="华为手机" class="absolute w-full h-full object-cover">
          <div class="container mx-auto px-4 h-full flex items-center relative z-20">
            <div class="max-w-lg slide-in">
              <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-white leading-tight text-shadow mb-4">
                华为Mate系列<br>重新定义高端
              </h1>
              <p class="text-[clamp(1rem,2vw,1.25rem)] text-white/90 mb-8 max-w-md">
                搭载最新麒麟芯片，卓越摄影体验，开启智慧生活新方式
              </p>
              <div class="flex flex-wrap gap-4">
                <a href="#" class="px-6 py-3 bg-huawei-blue text-white rounded-md hover:bg-huawei-blue/90 transition-colors">了解更多</a>
                <a href="#" class="px-6 py-3 bg-white/20 backdrop-blur-sm text-white rounded-md border border-white/30 hover:bg-white/30 transition-colors">立即购买</a>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 轮播项2 -->
        <div class="carousel-item relative h-full">
          <div class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent z-10"></div>
          <img src="https://picsum.photos/id/160/1920/1080" alt="华为笔记本" class="absolute w-full h-full object-cover">
          <div class="container mx-auto px-4 h-full flex items-center relative z-20">
            <div class="max-w-lg slide-in">
              <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-white leading-tight text-shadow mb-4">
                华为笔记本<br>智慧协同新体验
              </h1>
              <p class="text-[clamp(1rem,2vw,1.25rem)] text-white/90 mb-8 max-w-md">
                轻薄设计，强劲性能，多设备协同，提升工作效率
              </p>
              <div class="flex flex-wrap gap-4">
                <a href="#" class="px-6 py-3 bg-huawei-blue text-white rounded-md hover:bg-huawei-blue/90 transition-colors">了解更多</a>
                <a href="#" class="px-6 py-3 bg-white/20 backdrop-blur-sm text-white rounded-md border border-white/30 hover:bg-white/30 transition-colors">立即购买</a>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 轮播控制 -->
        <button id="prevBtn" class="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/20 backdrop-blur-sm text-white flex items-center justify-center z-30 hover:bg-white/30 transition-colors">
          <i class="fa fa-chevron-left"></i>
        </button>
        <button id="nextBtn" class="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/20 backdrop-blur-sm text-white flex items-center justify-center z-30 hover:bg-white/30 transition-colors">
          <i class="fa fa-chevron-right"></i>
        </button>
        <div class="absolute bottom-6 left-1/2 -translate-x-1/2 flex space-x-2 z-30">
          <button class="w-3 h-3 rounded-full bg-white opacity-100 carousel-indicator active"></button>
          <button class="w-3 h-3 rounded-full bg-white opacity-50 carousel-indicator"></button>
        </div>
      </div>
    </section>
  </main>

  <!-- 交互JS（仅导航+轮播） -->
  <script>
    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 50) { navbar.classList.add('shadow-md'); }
      else { navbar.classList.remove('shadow-md'); }
    });

    // 移动端菜单切换
    const menuBtn = document.getElementById('menuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    menuBtn.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
      const icon = menuBtn.querySelector('i');
      icon.classList.toggle('fa-bars');
      icon.classList.toggle('fa-times');
    });

    // 轮播逻辑
    const carouselItems = document.querySelectorAll('.carousel-item');
    const indicators = document.querySelectorAll('.carousel-indicator');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    let currentIndex = 0;
    let carouselInterval;

    function showSlide(index) {
      carouselItems.forEach(item => item.classList.remove('active'));
      indicators.forEach(ind => { ind.classList.remove('active', 'opacity-100'); ind.classList.add('opacity-50'); });
      carouselItems[index].classList.add('active');
      indicators[index].classList.add('active', 'opacity-100');
    }
    function nextSlide() { currentIndex = (currentIndex + 1) % carouselItems.length; showSlide(currentIndex); }
    function startCarousel() { carouselInterval = setInterval(nextSlide, 5000); }
    function stopCarousel() { clearInterval(carouselInterval); }

    // 轮播事件绑定
    prevBtn.addEventListener('click', () => { stopCarousel(); currentIndex = (currentIndex - 1 + carouselItems.length) % carouselItems.length; showSlide(currentIndex); startCarousel(); });
    nextBtn.addEventListener('click', () => { stopCarousel(); nextSlide(); startCarousel(); });
    indicators.forEach((ind, idx) => ind.addEventListener('click', () => { stopCarousel(); currentIndex = idx; showSlide(idx); startCarousel(); }));
    document.getElementById('carousel').addEventListener('mouseenter', stopCarousel);
    document.getElementById('carousel').addEventListener('mouseleave', startCarousel);

    // 初始化轮播
    window.addEventListener('DOMContentLoaded', startCarousel);
  </script>
</body>
</html>